<!-- 圈子公告发布页 -->
<!-- 小瓜子 更新于 2020/08/22 -->
<!-- 小瓜子 更新于 2020/08/24 修复不显示字数bug 更改页面结构 添加注释-->

<!-- 小瓜子 更新于 2020/08/31 -->
<!-- 1.完成公告发布接口 
	 2.新增公告标题 -->
	 
<!-- 小瓜子 更新于 2020/08/31 -->
<!-- 1.更改按钮样式
	 2.修改接口 -->

<!-- 小瓜子 更新于 2020/09/07 -->
<!-- 1.发布后跳转回圈子页面  -->
<template>
	<view class="notice_edit">
		<!-- 输入标题 -->
		<view class="addTitle">
			<input type="text" v-model="notice_title" placeholder="请输入标题(必须)" />
		</view>
		<!-- 输入框部分 -->
		<view class="edit_box">
			<textarea class="notice_active" v-model="noticeContent" placeholder="请输入50字以内信息(必须)" maxlength="50"/>
			<text class="length">{{noticeContent.length}}/50</text>
		</view>
		<!-- 添加图片提示 -->
		<text class="title">选择一张图片(非必须)</text>
		<!-- 选择图片按钮 -->
		<view class="picture_box">
			<view class="picture" v-show="imgList.length != 0">
				<image :src="imgList[0]" mode="aspectFill" @tap="previewImage"></image>
				<text class="inxupt inxupttubiao23 delete" @tap="deletePicture"></text>
			</view>
			<view class="add_picture inxupt inxupttubiao29" v-show="imgList.length == 0" @tap="addPicture"></view>
		</view>
		<button type="submit" class="submit_button" @tap="submit">发布公告</button>
	</view>
</template>

<script>
	import { _ajax } from '../../in-xupt-functions.js'
	import BaseUrl from '../../config.js'
	export default {
		data() {
			return {
				imgList: [], // 选择的图片链接 
				showAdd: true, // 是否显示添加图片按钮
				noticeContent: '', // 公告内容
				notice_title: '' // 公告标题
			};
		},
		methods: {
			// 点击添加图片
			addPicture: function () {
				let that = this;
				uni.chooseImage({
					count: 1,
					sourceType: ["album"],
					success(img_url) {
						that.imgList = img_url.tempFilePaths;
						that.showAdd = false;
					}
				})
			},
			// 点击图片进行预览
			previewImage: function () {
				uni.previewImage({
					current: this.imgList[0],
					urls: this.imgList
				})
			},
			// 点击图片右上角的X删除图片
			deletePicture: function () {
				this.imgList = [];
				this.showAdd = true;
			},
			// 上传图片函数、method为回调函数，在上传了图片之后请求上传公告内容
			uploadImg: function(method) {
				let _this = this;
				uni.uploadFile({
					url: BaseUrl + '/upload',
					header: {
						'token': _this.token,
					},
					name: 'file',
					filePath: _this.imgList[0],
					success:(res) => {
						// 解析传回的数据（字符串转json）
						let resData = JSON.parse(res.data)
						if (resData.status == 0) {
							// 返回成功则将返回的链接写入图片列表中
							_this.imgList[0] = resData.data;
							// 执行回调函数
							method()
						}else {
							// 返回错误则显示报错信息
							uni.showToast({
								icon: "none",
								title: res.data.msg
							})
						}
					},
					fail: (err) => {
						uni.hideLoading()
						uni.showToast({
							icon: "none",
							title: "好像除了点问题>_<"
						})
						return
					}
				})
			},
			// 上传公告内容函数
			uploadBody: function() {
				let _this = this;
				_ajax({
					url: '/circle/' + _this.communityId + '/announcement',
					method: 'POST',
					data: {
						'mediaUrls': _this.imgList,
						'title': _this.notice_title,
						'body': _this.noticeContent,
						'top': false
					}
				}).then(res => {
					if(res.data.status == 0) {
						console.log('发布成功')
						// 发布成功则返回到对应的圈子页
						uni.hideLoading()
						uni.showToast({
							icon: "none",
							title: "发布成功^-^",
							success: () => {
								uni.isRefresh = true
								uni.navigateBack({
									delta: 1,
									animationType:'slide-out-right'
								})
							}
						})
						
					}else {
						uni.hideLoading()
						uni.showToast({
							icon:'none',
							title: res.data.msg,
						})
						return
					}
					
				})
			},
			// 点击发布按钮
			submit: function () {
				var _this = this;
				// 判断是否输入公告标题，没有标题则提示输入标题
				if(!_this.notice_title) {
					uni.showToast({
						icon: "none",
						title: "请输入公告标题"
					})
					return
				}
				// 判断是否输入公告内容，没有内容则提示输入内容
				if(!_this.noticeContent) {
					uni.showToast({
						icon: "none",
						title: "请输入公告内容"
					})
					return
				}
				// 确认有标题和内容之后，判断是否有图片等多媒体文件，有则先上传多媒体文件，没有则直接上传公告
				uni.showLoading({
					mask: true,
					title: "正在上传..."
				})
				if(_this.imgList == false) {
					_this.uploadBody()
				} else {
					_this.uploadImg(_this.uploadBody);
				}
				
			}
		},
		onLoad(options) {
			this.token = uni.getStorageSync('token');
			this.communityId = options.communityId;
		}
	}
</script>

<style lang="less">
	// 小瓜子 2020/08/24 更改样式结构
	.inxupttubiao29::before {
		display: inline-block;
		height: 200rpx;
		width: 200rpx;
		font-size: 200rpx;
	}
	.addTitle {
		margin: 20rpx 0;
		input {
			width: 100%;
			background-color: #FFFFFF;
			padding: 20rpx;
		}
	}
	.notice_edit {
		.edit_box {
			position: relative;
			.notice_active {
				width: 100%;
				min-height: 200rpx;
				background-color: #FFFFFF;
				padding: 20rpx;
			}
			.length {
				color: @g-gray;
				position: absolute;
				right: 10rpx;
				bottom: 10rpx;
			}
		}
		.title {
			padding-left: 10rpx;
			margin-top: 20rpx;
			color: @g-gray;
		}
		// 图片输入框
		.picture_box {
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			
			view {
				width: 170rpx;
				height: 170rpx;
				margin: 20rpx;
			}
			.picture {
				box-sizing: border-box;
				border: 2px solid #7f7f7f;
				position: relative;
				
				image {
					width: 100%;
					height: 100%;
					// z-index: 100;
				}
				.delete {
					position: absolute;
					padding: 2px;
					top: 0;
					right: 0;
				}
			}
			.add_picture {
				font-size: 5rem;
			}
			.add_picture::before {
				position: relative;
				display: inline-block;
				top: -20rpx;
				left: -18rpx;
			}
		}
		.submit_button {
			position: absolute;
			bottom: 40rpx;
			left: 20%;
			width: 450rpx;
			height: 88rpx;
			line-height: 88rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			border-radius: 10rpx;
			background-color: @g-pink;
		}
	}
</style>
